<template>
  <view class="content">
    <view class="mForm">
      <u-form :model="form" label-width="150rpx">
        <u-form-item label="所在地区">
          <div class="flex-y-center">
            <div class="flex-w-1" @click="showAddressPicker = true">
              <AddressPicker
                :show.sync="showAddressPicker"
                :province_id.sync="form.province_id"
                :district_id.sync="form.district_id"
                :city_id.sync="form.city_id"
                @confirm="addressConfirm"
              ></AddressPicker>
            </div>
            <view @click="getPosition" class="flex-y-center">
              <u-icon name="map-fill"></u-icon>
              <view>{{ $t("my.positioning") }}</view>
            </view>
          </div>
        </u-form-item>
        <div class="custom-form-item">
          <u-form-item label="详细地址" border-bottom>
            <u-input
              v-model="form.address"
              type="textarea"
              auto-height
              placeholder="街道、楼牌号等"
            ></u-input>
          </u-form-item>
        </div>
      </u-form>
    </view>
    <view class="submit" @click="submit">
      <view class="m-btn"> 提交</view>
    </view>
  </view>
</template>

<script>
import { index as serviceIndex, updateInfo } from "@/api/service-home";
import AddressPicker from "../components/address-picker";
export default {
  components: {
    AddressPicker
  },

  data() {
    return {
      showAddressPicker: false,
      form: {
        province_id: "",
        district_id: "",
        city_id: "",
        lng: "",
        lat: "",
        address: ""
      }
    };
  },

  onLoad() {
    this.loadData();
  },

  methods: {
    async loadData() {
      const res = await serviceIndex({}, true);
      this.form = Object.assign(this.form, res.data.workerInfo);
    },
    async getPosition() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            this.form.lng = res.longitude;
            this.form.lat = res.latitude;
            this.form.address = res.name;
            this.getAddress(res.address + res.name);
          },
          fail: () => {
            this.$u.toast(this.$t("my.failPosition"));
          }
        });
      }
    },

    getAddress(address) {
      this.$allrequest.classification
        .addressSmart({
          address
        })
        .then((res) => {
          if (res.code == 0) {
            this.form.province_id = res.data.province_id;
            this.form.city_id = res.data.city_id;
            this.form.district_id = res.data.region_id;
          }
        });
    },
    addressConfirm(e) {
      this.getAddress(e.position + this.form.address);
    },
    async submit() {
      if (!this.form.lng || !this.form.lat)
        return this.$utils.toast("请选择定位信息");
      if (!this.form.address) return this.$utils.toast("请填写详细位置");

      await updateInfo({
        key: ["lat", "lng", "province_id", "city_id", "district_id", "address"],
        val: [
          String(this.form.lat),
          String(this.form.lng),
          this.form.province_id,
          this.form.city_id,
          this.form.district_id,
          this.form.address
        ]
      });
      this.$utils.goBack();
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}
/deep/.custom-form-item {
  .u-form-item--left {
    display: block !important;
  }
  .u-form-item--left__content__label {
    margin-top: -8rpx;
  }
}
.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    width: 100%;

    input {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }
  }
}

.des {
  padding: 8rpx 24rpx 0;
  color: #8c8c8c;
  font-size: 24rpx;
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  padding: 80rpx 24rpx 0;
}
</style>
